<template>
	<el-pagination
		:current-page="pageOption.current"
		background
		:page-sizes="pageSizes"
		:page-size="pageOption.size"
		:layout="pageLayout"
		:total="total"
		@size-change="onSizeChange"
		@current-change="onPageChange"
	>
	</el-pagination>
</template>
<script>
	export default { name: "HaPagination" };
</script>
<script setup>
	import { defineProps } from "vue";
	const prop = defineProps({
		pageSizes: {
			type: Array,
			default: () => [2, 5, 10, 15, 20, 30, 50, 100],
		},
		pageLayout: {
			type: String,
			default: "total, sizes, prev, pager, next, jumper",
		},
		total: {
			type: Number,
			default: 0,
		},
		pageOption: {
			type: Object,
			default: () => ({
				current: 1,
				size: 10,
			}),
		},
	});

	const emit = defineEmits(["pagination"]);
	function onSizeChange(size) {
		prop.pageOption.size = size;
		emit("pagination", prop.pageOption);
	}
	function onPageChange(page) {
		prop.pageOption.current = page;
		emit("pagination", prop.pageOption);
	}
</script>
<style lang='scss' scoped>
</style>